<template>
     <van-nav-bar title="商品列表" left-text="返回" left-arrow @click-left="onClickLeft" />
     <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <!-- <van-cell v-for="item in productData" :key="item" :title="item" > -->
          <!--使用循环把数据内容循环读取-->
          <div v-for="item in productData" :key="item">
               <van-card num="2" :price="item.price" :desc="item.name" :title="item.name"
                    :thumb="item.img" @click="onClick(item.id)">
                    <template #tags>
                         <van-tag plain type="danger">特价处理</van-tag>
                         <van-tag plain type="primary">倒计时</van-tag>
                    </template>
                    <template #footer>
                         <van-button size="mini">收藏</van-button>
                         <van-button size="mini">关注</van-button>
                    </template>
               </van-card>
               <hr style="color: rgb(232, 229, 229);">
               <!-- <van-divider /> -->
          </div>

     </van-list>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { ProductApi } from '@/api';
import { useRoute,useRouter } from 'vue-router';
let route = useRoute()
let router=useRouter()
// const list = ref([]);
const productData = ref<never[]>([]);
const loading = ref(false);
const finished = ref(false);

const pageData = reactive({
     pageSize: 5,
     pageNum: 1,
     categoryId:0
})
onMounted(() => { 
     //获取id值
     pageData.categoryId = Number(route.query.id)
     console.log(pageData.categoryId);
     
})
const onLoad = () => {
     // 异步更新数据
     callProductApi()
     // 加载状态结束
     loading.value = false;

     // setTimeout 仅做示例，真实场景中一般为 ajax 请求
     // setTimeout(() => {
     //      for (let i = 0; i < 10; i++) {
     //           // list.value.push(list.value.length + 1);
     //           productData.value.push(productData.value.length + 1 + "商品信息")
     //      }

     //      // 加载状态结束
     //      loading.value = false;

     //      // 数据全部加载完成
     //      if (productData.value.length >= 40) {
     //           finished.value = true;
     //      }
     // }, 1000);
};
//创建接口函数
const callProductApi = () => {
     //要不要把加载状态打开
     loading.value = true;

     ProductApi.select.call({categoryId:pageData.categoryId ,pageNum: pageData.pageNum, pageSize: pageData.pageSize }).then((res: any) => {
          console.log(res);
          // 加载状态结束
          loading.value = false
          if (res.item.length == 0) { 
               //是否已加载完成
               finished.value=true
          } else {
               productData.value = productData.value.concat(res.item)
               pageData.pageNum = pageData.pageNum + 1
          }
          
          
     })
}

//点击商品跳转到商品详情页
const onClick = (id:number) => { 
     router.push({ name: 'moveproductdetil', query: {id:id} })
}


const onClickLeft = () => history.back();
</script>
<style scoped>
.van-card__header {
     background: rgb(189, 186, 186);
}
</style>